<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <meta charset="UTF-8">
    <title>两个日期区间所有日期</title>
    <link rel="stylesheet" href="./src/css/common.css">
</head>
<body>
<div class="row-box row-1">
    <div class="title">
        <span>获取两个日期区间所有日期</span>
    </div>
    <div class="flex-box">
        <input class="flex-item" type="date" value="2022-03-30" id="input-1-1">
        <input class="flex-item" type="date" value="2022-04-01" id="input-1-2">
        <button class="flex-item" onclick="getRangeDate()">计算</button>
    </div>
    <div class="result" id="result-1">

    </div>
</div>
<div class="row-box row-1">
    <div class="title">
        <span>获取两个日期区间秒数</span>
    </div>
    <div class="flex-box">
        <input class="flex-item" type="date" value="2022-03-30" id="input-2-1">
        <input class="flex-item" type="date" value="2022-04-01" id="input-2-2">
        <button class="flex-item" onclick="getTimeDiff()">计算</button>
    </div>
    <div class="result" id="result-2">

    </div>
</div>

<script>

    function getRangeDate() {
        // 从 '2022-01-01' 到 '2022-01-05' 的所有日期
        let startDate = document.getElementById('input-1-1').value;
        let endDate = document.getElementById('input-1-2').value;
        const dates = getDates(startDate, endDate);
        // 输出所有日期
        let html = ''
        for(let date of dates) {
            html += '<span> '+date+' </span><br>'
        }
        document.getElementById('result-1').innerHTML = html

    }
    function getDates(startDate, endDate) {
        startDate = new Date(startDate)
        endDate = new Date(endDate)
        let dates = [];
        let currentDate = new Date(startDate);

        while (currentDate <= endDate) {
            let currDate = new Date(currentDate)
            dates.push(String(currDate.getFullYear()) + '-' + (currDate.getMonth()+1).toString().padStart(2, '0') + '-' + currDate.getDate().toString().padStart(2,'0'));
            currentDate.setDate(currentDate.getDate() + 1);
        }
        return dates;
    }

    function getTimeDiff() {
        let startTime = document.getElementById('input-2-1').value;
        let endTime = document.getElementById('input-2-2').value;
        startTime = new Date(startTime)
        endTime = new Date(endTime)
        document.getElementById('result-2').innerHTML = (endTime.getTime()/1000-startTime.getTime()/1000) + ' 秒'
        return endTime.getTime()-startTime.getTime()
    }


</script>
</body>
</html>